<template>
	<div class="MachineEidt">
		<div class="MachineEidt_header">
			<div class="btn">
				<el-button type="success" @click="$router.back()">返回列表</el-button>
			</div>
		</div>
		<div class="MachineEidt_content">
			<TabBlue :tabs="['编辑属性']" :activeTab.sync="activeTab">
				<div slot="TabColContent" class="TabColContent">
					<div class="inputItem" v-for="(item,index) in inputs" :key="index">
						<div class="inputTitle">{{item.title}}</div>
						<div class="inputContent">
							<el-input v-model="form1[item.key]" placeholder="请输入内容"></el-input>
						</div>
					</div>
					<div class="add">
						<el-button type="info" @click="cancalMachine">取消</el-button>
						<el-button type="primary" @click="saveMachine">保存</el-button>
					</div>
				</div>
			</TabBlue>
			<TabBlue :tabs="['添加设备']" :activeTab.sync="activeTab">
				<div slot="TabColContent" class="TabColContent">
					<div class="inputItem" v-for="(item,index) in inputs" :key="index">
						<div class="inputTitle">{{item.title}}</div>
						<div class="inputContent">
							<el-input v-model="form2[item.key]" placeholder="请输入内容"></el-input>
						</div>
					</div>
					<div class="add">
						<el-button type="primary" @click="addMachine">添加设备</el-button>
					</div>
				</div>
			</TabBlue>
		</div>
	</div>
</template>
<script>
	import TabBlue from '../../components/TabBlue.vue'
	export default {
		components: {
			TabBlue,
		},
		data() {
			return {
				activeTab: '1',
				form1: {
					id: 'HSC1080',
					status: '',
					type: '路灯',
					group: '设备组1',
					status: '正常',
					power: '0.648kw',
					level: '1',
					lestPower: '4343w',
					using: '正常'
				},
				form2: {
					id: 'HSC1080',
					status: '',
					type: '路灯',
					group: '设备组1',
					status: '正常',
					power: '0.648kw',
					level: '1',
					lestPower: '4343w',
					using: '正常'
				},
				inputs: [
					{title: '设备编号',key: 'id'},
					{title: '设备类别',key: 'type'},
					{title: '所属设备组',key: 'group'},
					{title: '设备状态',key: 'status'},
					{title: '累计用电量',key: 'power'},
					{title: '亮度等级',key: 'level'},
					{title: '充电桩剩余电量',key: 'lestPower'},
					{title: '使用状态',key: 'using'}]
			}
		},
		methods: {
			cancalMachine() {
				this.$message({
                    type: 'success',
                    message: '已取消修改'
                });
                this.$router.push('/machineList')
			},
			saveMachine() {
				this.$confirm('此操作将覆盖之前的设备信息，是否继续?', '提示', {
				    type: 'warning'
				}).then(() => {
				    this.$message({
				        type: 'success',
				        message: '保存成功!'
				    });
				    this.$router.push('/machineList')
				}).catch(() => {
				    this.$message({
				        type: 'info',
				        message: '已取消保存'
				    });
				});
			},
			addMachine() {
				this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
                this.$router.push('/machineList')
			},
		}
	}
</script>
<style>

	.MachineEidt {
		width: 100%;
		height: 100%;
	}
	.MachineEidt_header {
		background-color: #fff;
		border-top: 1px solid #E9EEF3;
		height: 50px;
	}
	.MachineEidt_header:after {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
	.MachineEidt_header .btn {
		float: right;
		height: 100%;
	}
	.MachineEidt_header .btn:after {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
	.MachineEidt_header button {
		display: inline-block;
		vertical-align: middle;
	}
	.MachineEidt_header .el-button {
		padding: 10px 15px;
		font-size: 12px;
		margin-right: 20px;
	}
	.MachineEidt_content {
		padding: 10px 20px;
		box-sizing: border-box;
	}
	.MachineEidt_content .TabColContent {
		background-color: #fff;
		padding: 20px;
		border-radius: 3px;
		margin-bottom: 20px;
	}
	.MachineEidt_content .TabColContent .inputItem {
		display: inline-block;
		margin-right: 30px;
		margin-bottom: 10px;
	}
	.MachineEidt_content .TabColContent .inputItem .inputTitle {
		display: inline-block;
		margin-right: 20px;
		vertical-align: middle;
		width: 150px;
	}
	.MachineEidt_content .TabColContent .inputItem:before {
		content: '';
		display: inline-block;
		width: 3px;
		height: 20px;
		vertical-align: middle;
		background-color: rgba(42, 88, 173,.9);
		margin-right: 10px;
	}
	.MachineEidt_content .TabColContent .inputItem .inputContent {
		display: inline-block;
		vertical-align: middle;
	}
	.MachineEidt_content .TabColContent .add {
		text-align: center;
		margin-top: 20px;
	}
</style>